<template lang="html">
  <div id="charts">
    <input type="date" v-model="startdate" />至
    <input type="date" v-model="enddate" />
    <div id="SC" :style="{width:'100%',height:'100%'}">
    </div>
  </div>
</template>

<script>
  import * as Util from '../Util'
  import co from 'co'
  import echarts from 'echarts'
  import { HttpResetClass } from 'vue-client'

  let getData = function * (self) {
    let load = new HttpResetClass()
    load.load('POST','rs/sql/sellinganalysis',
      {data: {startDate: self.startdate, endDate: self.enddate}},
      {resolveMsg: null, rejectMsg: null})
      .then((res) => {
        self.texttile = '同年销售对比分析'
        let arrparams = []
        for (var i = 0; i < res.data.length; i++) {
          arrparams[i] = res.data[i].name
        }
        console.log(arrparams,res.data)
        self.set(arrparams,res.data)
      })
  }
  export default {
    title: "同年销售对比分析",
    props: {
      startdate: {
        type: String,
        default: Util.toStandardDateString()
      },
      enddate: {
        type: String,
        default: Util.toStandardDateString()
      }
    },
    data () {
      return {
        texttile: '',
        xc: ''
      }
    },
    methods: {
      set (arrparams,pricedata) {
        this.xc = echarts.init(document.getElementById('SC'))
        this.xc.setOption(
          {
            title : {
              text: '销售额往年同比分析',
              subtext: '***燃气公司'
            },
            tooltip : {
              trigger: 'axis'
            },
            legend: {
              data:['2017年','2018年']
            },
            toolbox: {
              show : true,
              feature : {
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
              }
            },
            calculable : true,
            xAxis : [
              {
                type : 'category',
                data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
              }
            ],
            yAxis : [
              {
                type : 'value'
              }
            ],
            series : [
              {
                name:'2017年',
                type:'bar',
                data:[13.0, 4.9, 7.0, 23.2, 25.6, 76.7, 322.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                markPoint : {
                  data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                  ]
                },
                markLine : {
                  data : [
                    {type : 'average', name: '平均值'}
                  ]
                }
              },
              {
                name:'2018年',
                type:'bar',
                data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 282.2, 248.7, 18.8, 6.0, 2.3],
                markPoint : {
                  data : [
                    {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
                    {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                  ]
                },
                markLine : {
                  data : [
                    {type : 'average', name : '平均值'}
                  ]
                }
              }
            ]
          }
        )
      },
      searchdata () {
        let getGen =getData(this)
        co(getGen)
      }
    },
    ready () {
      this.searchdata()
    },
    watch: {
      'startdate' (val) {
        this.searchdata()
      },
      'enddate' (val) {
        this.searchdata()
      }
    }
  }
</script>
